<template>
	<div>
		<el-card>
			<el-form :inline="true" class="demo-form-inline">
				<el-form-item label="请选择规则" style="width:100%;" class="s_selectbox">
					<el-input v-model="gzVal" :readonly="true" size="mini" style="width:200px;"></el-input>
					<input type="hidden" v-model="submit.rule">
					<el-button type="primary" size="mini" @click="openSelect">选择</el-button>
					<el-button type="primary" size="mini" @click="clearFun">清除</el-button>
					<el-button type="primary" size="mini">复制</el-button>
					<el-button type="primary" size="mini" @refresh="refresh">刷新</el-button>
				</el-form-item>
			</el-form>
		</el-card>
	</div>
</template>

<script>
	export default {
		name:"GzCard",
		data () {
			return {
				gzVal:"",//规则value
				submit:{
					rule:""
				}
			}
		},
		props:{
			gzData:{
				type:Object
			},
			type:{
				default:"gz1"
			}
		},
		watch:{
			gzData(val){
				this.gzVal=val.name;
				this.submit.rule=val.id
			},
		},
		methods:{
			openSelect () {
				if(this.type == "gz1"){
					this.$emit("selectPop","规则",this.submit.rule);
				}else if(this.type == 'gz2'){
					this.$emit("selectPop","规则2",this.submit.rule);
				}
			},
			clearFun(){
				this.gzVal="";
				this.submit.rule=""
			},
			resetFun(){
				this.gzVal="";
				this.submit.rule=""
			},
			refresh(){
				this.$emit("resetFun")
			}
		}
	}
</script>

<style lang="scss" scoped>
	.el-card {
		margin-left: 3px;
	}
	.dialogFirstRow>>>.el-input {
		width: 70px;
		margin-right: 10px;
	}
	
	.el-form-item.s_selectbox>>>.el-form-item__content {
		width: 80%;
	}
	
	
	.demo-form-inline>>>.el-form-item {
		margin-bottom: 0px;
	}
	
	.dialogFirstRow>>>label {
		height:41px;
		display:inline-block;
	}
</style>
